<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        ul {
            list-style: none;
        }
        
        .box {
            position: relative;
            width: 203px;
            height: 285px;
            margin: 0 auto;
            margin-top: 50px;
        }
        
        .box .photo img {
            height: 285px;
            ;
        }
        
        .box .photo {
            display: none;
            width: 203px;
            height: 285px;
        }
        
        .box .photo.active {
            display: block;
        }
        
        .menu {
            height: 15px;
            position: absolute;
            right: 10px;
            bottom: 20px;
        }
        
        .menu .circle {
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            margin: 0 3px;
        }
        
        .menu .circle.on {
            background-color: orange;
        }
        
        .sbox .right,
        .left {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 50px;
        }
        
        .sbox .left {
            left: 10px;
            background: url(./images/pre.png) no-repeat;
            background-size: 30px 50px;
        }
        
        .sbox .right {
            right: 10px;
            background: url(./images/next.png) no-repeat;
            background-size: 30px 50px;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="box">
            <div class="photo active"><img src="./海报/海报一.png" alt=""></div>
            <div class="photo"><img src="./海报/海报二.png" alt=""></div>
            <div class="photo"><img src="./海报/海报三.png" alt=""></div>
            <div class="photo"><img src="./海报/海报四.png" alt=""></div>
            <div class="photo"><img src="./海报/海报五.png" alt=""></div>
            <div class="photo"><img src="./海报/海报六.png" alt=""></div>
            <ul class="menu">
                <li class="circle on"></li>
                <li class="circle"></li>
                <li class="circle"></li>
                <li class="circle"></li>
                <li class="circle"></li>
                <li class="circle"></li>
            </ul>
            <div class="sbox">
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </div>

    </div>
    <script>
        let circles = document.querySelectorAll(".circle")
        let photos = document.querySelectorAll(".photo")
        let index = 0
        let timer = null
            // 自动播放
        function autoPlay() {
            timer = setInterval(function() {
                let oldIndex = index
                index++
                if (index === 6) {
                    index = 0
                }
                let newIndex = index
                same(oldIndex, newIndex)
            }, 1500)
        }
        autoPlay()
            // 停止和继续
        function stopAndOn() {
            let boxs = document.querySelector(".box")
            boxs.addEventListener("mouseover", function() {
                clearInterval(timer)
                timer = null
            })
            boxs.addEventListener("mouseleave", function() {
                autoPlay()
            })
        }
        stopAndOn()
            // 点击左右图标轮播
        function leftAndRight() {
            let left = document.querySelector(".left")
            let right = document.querySelector(".right")
            left.addEventListener("click", function() {

                let oldIndex = index
                index--
                if (index === -1) {
                    index = 5
                }
                let newIndex = index
                same(oldIndex, newIndex)
            })

            right.addEventListener("click", function() {

                let oldIndex = index
                index++
                if (index === 6) {
                    index = 0
                }
                let newIndex = index
                same(oldIndex, newIndex)
            })
        }
        leftAndRight()
            // 点击圆点切换
        function clickCircle() {

            circles.forEach(function(circle, i) {

                circle.addEventListener("click", function() {
                    same(index, i)
                    index = i
                })

            })

        }
        clickCircle()
            // 简化代码
        function same(oldIndex, newIndex) {
            circles[oldIndex].classList.remove("on")
            photos[oldIndex].classList.remove("active")
            circles[newIndex].classList.add("on")
            photos[newIndex].classList.add("active")
        }
    </script>

</body>

</html>